﻿var freeFormBase = {
    components: [
        {
            name: "lg-form-base-items",
            data: {
                emits:["selected"],
                methods: {
                    onSelected: function (name, ready = true) {
                        if (ready) {
                            this.$emit("selected", name);
                        }
                    }
                },
                template: `
            <div class="lg-diy-sidebar-nav-child">
                    <div class="lg-field-group">
                        <span class="title">主题</span>
                        <div class="lg-field-group-box">
                            <div class="field" v-on:click="onSelected('',false)"><i class="fa fa-magic"></i>页面背景</div>
                            <div class="field" v-on:click="onSelected('',false)"><i class="fa fa-photo"></i>Banner</div>
                            <div class="field" v-on:click="onSelected('',false)"><i class="fa fa-table"></i>表单样式</div>
                            <div class="field" v-on:click="onSelected('',false)"><i class="fa fa-circle-o"></i>提交按钮</div>
                        </div>
                    </div>
                </div>
                <div class="lg-diy-sidebar-nav-child">
                    <div class="lg-field-group">
                        <span class="title">普通字段</span>
                        <div class="lg-field-group-box">
                            <div class="field" v-on:click="onSelected('SingleText')"><i class="fa fa-font"></i>单行文字</div>
                            <div class="field" v-on:click="onSelected('Textarea')"><i class="fa fa-align-justify"></i>文本域</div>
                            <div class="field" v-on:click="onSelected('Number')"><i class="fa fa-sort-numeric-asc"></i>数字</div>
                            <div class="field" v-on:click="onSelected('Link')"><i class="fa fa-link"></i>链接</div>
                            <div class="field" v-on:click="onSelected('IdNumber')"><i class="fa fa-id-card-o"></i>证件号</div>
                            <div class="field" v-on:click="onSelected('Email')"><i class="fa fa-envelope-o"></i>邮箱</div>
                            <div class="field" v-on:click="onSelected('Address')"><i class="fa fa-map-marker"></i>地址</div>
                            <div class="field" v-on:click="onSelected('Phone')"><i class="fa fa-phone"></i>电话</div>
                            <div class="field" v-on:click="onSelected('SmsCode')"><i class="fa fa-code"></i>验证码</div>
                            <div class="field" v-on:click="onSelected('Date')"><i class="fa fa-calendar"></i>日期</div>
                            <div class="field" v-on:click="onSelected('DateRange')"><i class="fa fa-clock-o"></i>起止时间</div>
                            <div class="field" v-on:click="onSelected('Radio')"><i class="fa fa-check-circle-o"></i>单项选择</div>
                            <div class="field" v-on:click="onSelected('CheckBlock')"><i class="fa fa-square-o"></i>单选块</div>
                            <div class="field" v-on:click="onSelected('Checkbox')"><i class="fa fa-check-square-o"></i>多项选择</div>
                            <div class="field" v-on:click="onSelected('Accept')"><i class="fa fa-check"></i>条件开关</div>
                            <div class="field" v-on:click="onSelected('Switch')"><i class="fa fa-toggle-on"></i>开关</div>
                            <div class="field" v-on:click="onSelected('Select')"><i class="fa fa-caret-square-o-down"></i>下拉单选</div>
                            <div class="field" v-on:click="onSelected('MultipleSelect')"><i class="fa fa-caret-square-o-down"></i>下拉复选</div>
                            <div class="field" v-on:click="onSelected('',false)"><i class="fa fa-caret-square-o-down"></i>多级下拉</div>
                            <div class="field" v-on:click="onSelected('',false)"><i class="fa fa-caret-square-o-up"></i>提示选填</div>
                            <div class="field" v-on:click="onSelected('Range')"><i class="fa fa-minus"></i>滑动条</div>
                            <div class="field" v-on:click="onSelected('',false)"><i class="fa fa-tags"></i>标签</div>
                        </div>
                    </div>
                    <div class="lg-field-group">
                        <span class="title">上传字段</span>
                        <div class="lg-field-group-box">
                            <div class="field" v-on:click="onSelected('Files')"><i class="fa fa-cloud-upload"></i>附件上传</div>
                            <div class="field" v-on:click="onSelected('Image')"><i class="fa fa-picture-o"></i>图片上传</div>
                        </div>
                    </div>
                    <div class="lg-field-group">
                        <span class="title">高级字段</span>
                        <div class="lg-field-group-box">
                            <div class="field" v-on:click="onSelected('',false)"><i class="fa fa-clone"></i>字段组</div>
                            <div class="field" v-on:click="onSelected('Info')"><i class="fa fa-align-left"></i>描述</div>
                            <div class="field" v-on:click="onSelected('Group')"><i class="fa fa-th-large"></i>段落标题</div>
                            <div class="field" v-on:click="onSelected('',false)"><i class="fa fa-toggle-on"></i>文本选填</div>
                        </div>
                    </div>

                </div>
              `
            }
        },
        {
        name: "lg-form-setting",
        data: {
            props: ["data", "base", "typeName", "items"],
            data() {
                return {
                    limitWords: false,
                    minWords: "",
                    maxWords: "",
                    options: {
                        files: [
                            { Text: 'jpg', Value: '' },
                            { Text: 'jpeg', Value: '' },
                            { Text: 'png', Value: '' },
                            { Text: 'gif', Value: '' },
                            { Text: 'doc', Value: '' },
                            { Text: 'docx', Value: '' },
                            { Text: 'xls', Value: '' },
                            { Text: 'xlsx', Value: '' },
                            { Text: 'ppt', Value: '' },
                            { Text: 'pdf', Value: '' },
                            { Text: 'txt', Value: '' },
                            { Text: 'zip', Value: '' },
                            { Text: 'rar', Value: '' },
                            { Text: 'mp4', Value: '' },
                            { Text: 'mp3', Value: '' },
                            { Text: 'flv', Value: '' },
                        ],
                        width: [
                            { Text: '25', Value: '25%' },
                            { Text: '50', Value: '50%' },
                            { Text: '75', Value: '75%' },
                            { Text: '100', Value: '100%' },
                        ]
                    }
                }
            },
            computed: {
                getReveiver: function () {
                    var options = []
                    var arr = this.items.filter(p => p.TypeName == "Phone");
                    if (arr.length > 0) {
                        for (let i in arr) {
                            options.push({ Text: arr[i].Data.Title, Value: arr[i].Data.Name })
                        }
                    }
                    return options;
                }
            },
            methods: {
                AddOption: function () {
                    this.data.Options.push({
                        "Text": "选项",
                        "Value": "选项",
                        "ControlItems": [],
                        "Icon": "",
                        "NeedOtherValue": false
                    })
                },
                onWordsLimitCheck: function () {
                    this.limitWords = !this.limitWords;
                    if (this.limitWords) {
                        this.minWords = 0;
                        this.maxWords = 0;
                    } else {
                        this.data.TextLength = ""
                    }
                },
                SetLimit: function () {
                    var min = 0;
                    var max = 0;
                    if (this.minWords) {
                        min = this.minWords;
                    }
                    if (this.maxWords) {
                        max = this.maxWords;
                    }
                    this.data.TextLength = min + "~" + max;
                },
                setControl: function (obj) {
                    console.log("获取事件", obj)
                    var arr = this.items.filter(p => p.Data.Name == obj.name);
                    if (arr.length > 0) {
                        arr[0].Data.IsRender = obj.state;
                    }
                }
            },
            template: `
                    <div v-if="data">
					    <div class="lg-menu">{{data.Title}}</div>
					    <div class="lg-field-nature">
						    <lg-form-singletext v-if="data.Title!=undefined" :data="{Title:'标题'}" v-model:value="data.Title"></lg-form-singletext>
                            <lg-form-singletext v-if="data.EnTitle!=undefined" :data="{Title:'英文标题'}" v-model:value="data.EnTitle"></lg-form-singletext>
                            <lg-form-singletext v-if="data.Name!=undefined&&base" :data="{Title:'字段名',Tips:'修改此项会影响已报名的数据，请慎重改动！'}" v-model:value="data.Name"></lg-form-singletext>
                            <lg-form-singletext v-if="data.Value!=undefined" :data="{Title:'默认内容'}" v-model:value="data.Value"></lg-form-singletext>
                            <lg-form-textarea v-if="data.Tips!=undefined" :data="{Title:'描述'}" v-model:value="data.Tips"></lg-form-textarea>
                            <lg-form-singletext v-if="data.Group!=undefined" :data="{Title:'分组名称'}" v-model:value="data.Group"></lg-form-singletext>                           
                            <lg-form-accept v-if="data.Required!=undefined" :data="{Title:'这个是必填项'}" v-model:value="data.Required"></lg-form-accept>
                            <lg-form-link v-if="data.Api!=undefined" :data="{Title:'接口地址'}" v-model:value="data.Api"></lg-form-link>
                            <lg-setting-address v-model:level="data.Level" v-if="typeName=='Address'"></lg-setting-address>
                            <lg-setting-options :options="data.Options" v-model:display="data.Display" v-if="data.Options!=undefined" :items="items" v-on:set-control="setControl"></lg-setting-options>
                            <lg-setting-switch v-model:other-title="data.OtherTitle" v-model:other-tips="data.OtherTips" v-model:rows="data.OtherRows" v-if="typeName=='Switch'"></lg-setting-switch>
                            <lg-form-number v-model:value="data.FileCount" :data="{Title:'上传文件数量'}" v-if="typeName=='Files'"></lg-form-number>
                            <lg-form-number v-model:value="data.MaxSize" :data="{Title:'文件大小限制(MB)'}" v-if="typeName=='Files'"></lg-form-number>
                            <lg-form-multipleselect v-model:value="data.FileTypes" :data="{Title:'允许上传的文件类型',Options:options.files}" val-type="text" v-if="typeName=='Files'"></lg-form-multipleselect>
                            <lg-form-select v-model:value="data.Receiver" :data="{Title:'选择接收手机',Options:getReveiver}" val-type="text" v-if="typeName=='SmsCode'"></lg-form-select>
                            <lg-form-checkblock v-model:value="data.Width" v-if="data.Width!=undefined" val-type="text" :data="{Title:'表单宽度%',Options:options.width}"></lg-form-checkblock>
                            <lg-setting-base v-model:name="data.Name" v-model:exportname="data.ExportName" v-model:isexport="data.IsExport" v-model:isshow="data.IsShow" v-model:iswhere="data.IsWhere" v-model:wherekey="data.WhereKey" v-if="base"></lg-setting-base>                          
					    </div>
				    </div>`
        }
        },
        {
            name: "lg-setting-base",
            data: {
                props: {
                    "name": {
                        type: String,
                        default: ""
                    },
                    "exportname": {
                        type: String,
                        default: ""
                    },
                    "isexport": {
                        type: Boolean,
                        default: false
                    },
                    "isshow": {
                        type: Boolean,
                        default: false
                    },
                    'iswhere': {
                        type: Boolean,
                        default: false
                    },
                    "wherekey": {
                        type: String,
                        default: ""
                    }
                },
                methods: {
                    Switch: function (name) {
                        this.$emit("update:" + name, !this[name]);
                    },
                    onSelect: function (val, event) {
                        this.$emit("update:wherekey", val);
                    }
                },
                template: `
						    <lg-form-singletext v-if="exportname!=undefined" :data="{Title:'导出标题'}" v-model:value="exportname"></lg-form-singletext>
                            <div class="lg-form-item">
							    <div class="lg-form-check lg-form-switch-check" :class="{'lg-checked':isexport}"  @click="Switch('isexport')">
								    <i class="lg-form-check-icon"></i>
								    <span>默认导出</span>
							    </div>
						    </div>
                            <div class="lg-form-item">
							    <div class="lg-form-check lg-form-switch-check" :class="{'lg-checked':isshow}" @click="Switch('isshow')">
								    <i class="lg-form-check-icon"></i>
								    <span>默认展示列</span>
							    </div>
						    </div>
                            <div class="lg-form-item">
							    <div class="lg-form-check lg-form-switch-check" :class="{'lg-checked':iswhere}" @click="Switch('iswhere')">
								    <i class="lg-form-check-icon"></i>
								    <span>查询字段</span>
							    </div>
						    </div>
                            <div class="lg-form-item">
                               <div class="lg-form-block">
							        <div class="lg-form-title">
							        	<div class="lg-form-title-item">
							        		<span class="cn">查询方式</span><span class="en"></span>
							        	</div>
							        </div>
							        <div class="lg-form-control">
							         <div class="lg-form-select">
								        <div class="lg-select-title">
									        <input type="text" readonly="readonly" class="lg-input lg-input-text" :value="wherekey" />
									        <label class="fa fa-caret-down" for="lg-select-list"></label>
								        </div>
                                        <div class="lg-select-list-position lg-select-position">
								            <ul class="lg-select-list">
									            <li :class="['option',{'selected':wherekey=='精确匹配'}]" v-on:click="onSelect('精确匹配',$event)">精确匹配</li>
									            <li :class="['option',{'selected':wherekey=='模糊匹配'}]" v-on:click="onSelect('模糊匹配',$event)">模糊匹配</li>
								            </ul>
                                       </div>
							       </div>
							    </div>
							   </div>
						    </div>
`
            }
        },
        {
            name: "lg-setting-address",
            data: {
                props: {
                    "level": {
                        type: Number,
                        default: 4
                    }
                },
                computed: {
                    levelTitle: function () {
                        switch (this.level) {
                            case 4:
                                return "省/地区、市、区/县、详细地址";
                            case 3:
                                return "省/地区、市、区/县";
                            case 2:
                                return "省/地区、市";
                            case 1:
                                return "省/地区";
                        }
                    }
                },
                methods: {
                    Switch: function (name) {
                        this.$emit("update:required", !this[name]);
                    },
                    onSelect: function (val, event) {
                        this.$emit("update:level", val);
                    }
                },
                template: `
                        <!--地址精度-->
						<div class="lg-form-item">
							<div class="lg-form-title">
							    <div class="lg-form-title-item">
							      <span class="cn">地址精度</span><span class="en"></span>
							    </div>
							</div>
							<div class="lg-form-control">
							<div class="lg-form-select">
								<div class="lg-select-title">
									<input type="text" readonly="readonly" class="lg-input lg-input-text" :value="levelTitle" />
									<label class="fa fa-caret-down" for="selectDress"></label>
								</div>
                                <div class="lg-select-list-position lg-select-position" ref="levelPostion">
								    <ul class="lg-select-list">
									    <li :class="['option',{'selected':level==4}]" v-on:click="onSelect(4,$event)">省/地区、市、区/县、详细地址</li>
									    <li :class="['option',{'selected':level==3}]" v-on:click="onSelect(3,$event)">省/地区、市、区/县</li>
									    <li :class="['option',{'selected':level==2}]" v-on:click="onSelect(2,$event)">省/地区、市</li>
									    <li :class="['option',{'selected':level==1}]" v-on:click="onSelect(1,$event)">省/地区</li>
								    </ul>
                               </div>
							</div>
							</div>
						</div>`
            }
        },
        {
            name: "lg-setting-options",
            data: {
                props: ["options", "display", "items"],
                emits: ["setControl"],
                data() {
                    return {
                        currOption: null
                    }
                },
                methods: {
                    controled: function (name) {
                        return this.currOption.ControlItems.filter(p => p == name).length > 0;
                    },
                    setControlItem: function (name) {
                        let controlItems = this.currOption.ControlItems;
                        var state = false;
                        var arr = controlItems.filter(p => p != name);
                        if (arr.length == controlItems.length) {
                            this.currOption.ControlItems.push(name);
                            this.items.filter(p => p.Data.Name == name)[0].Data.IsRender = false;
                        } else {
                            this.currOption.ControlItems = arr;
                            state = true;
                        }
                        this.$emit("setControl", { name: name, state: state })
                    },
                    add: function () {
                        this.options.push({
                            "Text": "选项",
                            "Value": "",
                            "Id": lg.GetSN(6, 10),
                            "ControlItems": [],
                            "Icon": "",
                            "NeedOtherValue": false
                        })
                    },
                    remove: function (index) {
                        var that = this;
                        layer.confirm("确定移除选项？", function (box) {
                            layer.close(box);
                            that.options.splice(index, 1)
                        })

                    }
                },
                template: `
                        <div class="lg-form-item">
							<div class="lg-form-title">
							    <div class="lg-form-title-item">
							      <span class="cn">选项内容</span><span class="en"></span>
							     </div>
							</div>
							<div class="lg-form-control lg-form-option" tabindex="0" v-for="(item,index) in options">
								<input class="lg-input option" v-model="item.Text">
								<div class="lg-item-tool">
									<i class="fa fa-trash-o" aria-hidden="true" v-on:click="remove(index)"></i>
                                    <i class="fa fa-bars" title="逻辑表单" v-on:click="currOption=item"></i>
								</div>
							</div>
							<button class="fa fa-plus-square lg-btn lg-btn-primary addoption" v-on:click="add()">添加新选项</button>
						</div>
						<!--按钮排布-->
						<div class="lg-form-item" v-if="display!=undefined">
							<div class="lg-form-title">
							    <div class="lg-form-title-item">
							       <span class="cn">布局方式</span><span class="en"></span>
							     </div>
							 </div>
							<div class="lg-form-control lg-form-check-box flex-row flex-column">
							  <ul class="lg-form-ul lg-form-extra-ul">
								<li :class="{'checked':display=='inline'}" v-on:click="$emit('update:display', 'inline')">横向排布</li>
								<li :class="{'checked':display=='block'}" v-on:click="$emit('update:display', 'block')">竖向排布</li>
							  </ul>
							</div>
						</div>
                        <div class="lg-popup-shadow" v-if="this.currOption">
				            <div class="lg-popup-container">
					            <div class="lg-popup-title">
						            <span>设置逻辑表单规则</span>
						            <span class="fa fa-close" v-on:click="currOption=null"></span>
					            </div>
					            <div class="lg-popup-tips">
						            <i>*</i>选择选项后，才会显示所设置的字段
					            </div>
					            <div class="lg-popup-content">
						            <div class="lg-popup-sticky">
							            <div class="item-option">
								            选项内容：<span>{{this.currOption.Text}}</span>
							            </div>
						            </div>
						            <div class="item-select">
							            <ul class="lg-select-list lg-multipleselect-list">
								            <li class="option" :class="{'act':controled(item.Data.Name)}" v-for="item in items" :key="item.Data.Name" v-on:click="setControlItem(item.Data.Name)">
									            <div class="lg-form-check" :class="{'lg-checked':controled(item.Data.Name)}"><i class="lg-form-check-icon"></i><span>{{item.Data.Title}}</span></div>
								            </li>
							            </ul>
						            </div>
					            </div>
				            </div>
			        </div>`
            }
        },
        {
            name: "lg-setting-switch",
            data: {
                props: ["otherTitle", "otherTips", 'rows', 'textStart', 'textEnd'],
                methods: {
                    SwitchRequired: function () {
                        this.$emit("update:required", !this.required);
                    },
                    SetWidth: function (w) {
                        this.$emit("update:width", w);
                    }
                },
                template: `
                        <div class="lg-form-item">
							<div class="lg-form-title">文本标题</div>
							<input maxlength="400" class="lg-input lg-input-text" placeholder="请输入标题" :value="otherTitle" @input="$emit('update:otherTitle', $event.target.value)">
						</div>                       
						<div class="lg-form-item">
							<div class="lg-form-title">文本提示</div>
							<input class="lg-input lg-input-text" placeholder="请输入提示" :value="otherTips" @input="$emit('update:otherTips', $event.target.value)">
						</div>
                        <div class="lg-form-item">
							<div class="lg-form-title">文本行高</div>
							<div class="lg-form-select">
								<div class="lg-select">
									<input type="text" readonly="readonly" class="lg-input lg-input-text" :value="rows" />
									<label class="fa fa-caret-down" for="selectDress"></label>
								</div>
                                <div class="lg-select-position">
								    <ul class="select">
									    <li :class="['option',{'selected':rows==1}]" v-on:click="$emit('update:rows',1)">1</li>
									    <li :class="['option',{'selected':rows==2}]" v-on:click="$emit('update:rows',2)">2</li>
									    <li :class="['option',{'selected':rows==3}]" v-on:click="$emit('update:rows',3)">3</li>
									    <li :class="['option',{'selected':rows==4}]" v-on:click="$emit('update:rows',4)">4</li>
                                        <li :class="['option',{'selected':rows==5}]" v-on:click="$emit('update:rows',5)">5</li>
								    </ul>
                               </div>
							</div>
						</div>
                        <div class="lg-form-item">
							<div class="lg-form-title">字符长度</div>
							<input class="lg-input lg-input-text" placeholder="请输入提示" :value="textRange" @input="$emit('update:textRange', $event.target.value)">
						</div>`
            }
        }
    ],
    regComponent: function (app) {       
        for (let i in this.components) {
            app.component(this.components[i].name, this.components[i].data)
        }
    }
}

export { freeFormBase }